import React, { Component } from 'react';
import styles from './css/timePicker.module.css';
import { DatePicker, message, Form, Button } from 'antd';
import moment from 'moment';
import { Time } from '../../../utils/tools/transformTime.js';
// 中文化
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
moment.locale('zh-cn');
// 时间统一的格式
const dateFormat = 'YYYY-MM-DD';

const transformTime = new Time();
console.log('transformTime', transformTime);

function formTime(time) {
    const date = new Date(time);
    const year = date.getFullYear();
    const mouth = date.getMonth() + 1;
    const outMouth = mouth > 10 ? mouth : `${mouth}`;
    const day = date.getDate();
    const outDay = day > 10 ? day : `${day}`;
    return `${year}-${outMouth}-${outDay}`;
}
export default class timePicker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            beginTime: formTime(new Date()),
            endTime: formTime(new Date()),
            dateMoment: {
                beginTime: moment(formTime(new Date()), dateFormat),
                endTime: moment(formTime(new Date()), dateFormat)
            }
        }
    }


    onChangeStartTime = (date) => {
        const beginTime = date;
        const dateMoment = {
            beginTime: beginTime,
            endTime: this.state.dateMoment.endTime
        }
        this.setState({
            dateMoment: dateMoment
        }, () => {
            if (this.checkoutTime()) {
                this.resultTime()
            }
        });
    }
    onChangeEndTime = (date) => {
        const endTime = date;
        const dateMoment = {
            beginTime: this.state.dateMoment.beginTime,
            endTime: endTime
        }
        this.setState({
            dateMoment: dateMoment
        }, () => {
            if (this.checkoutTime()) {
                this.resultTime()
            }
        });
    }
    checkoutTime = () => {
        const beginTime = this.state.dateMoment.beginTime,
            endTime = this.state.dateMoment.endTime;
        const ifOrderly = beginTime.clone().isSameOrBefore(endTime);
        if (!ifOrderly) {
            message.error(`起始时间不能在结束时间之后`);
            return false
        }

        if (this.props.maxDyration) {
            const maxDays = beginTime.clone().add(this.props.maxDyration, 'day').isAfter(endTime);
            if (!maxDays) {
                message.error(`时间段需要小于${this.props.maxDyration}天`);
                return false
            }
        }
        return true
    }

    resultTime = () => {
        const { beginTime, endTime } = this.state.dateMoment;
        const start = beginTime.format(dateFormat)
        const end = endTime.format(dateFormat)
        console.log(start, end);

        this.setState({
            beginTime: start,
            endTime: end
        })
    }

    reset = () => {
        this.setState({
            beginTime: formTime(new Date()),
            endTime: formTime(new Date()),
            dateMoment: {
                beginTime: moment(formTime(new Date()), dateFormat),
                endTime: moment(formTime(new Date()), dateFormat)
            }
        })
    }

    timeSubmit = () => {
        const { beginTime, endTime } = this.state;
        console.log([beginTime, endTime]);

        this.props.onChange([beginTime, endTime]);
    }

    render() {
        return (
            <div className={styles.root}>
                <p>时间选择</p>
                <Form layout="inline">
                    <Form.Item label="申请开通时间">
                        <DatePicker
                            allowClear={false}
                            defaultValue={moment(this.state.beginTime, dateFormat)}
                            locale={locale}
                            onChange={(date, dateString) => this.onChangeStartTime(date, dateString)}
                            showToday
                            value={moment(this.state.beginTime, dateFormat)} />
                    </Form.Item>

                    {/* <DatePicker
                        allowClear={false}
                        showToday={true}
                        locale={locale}
                        defaultValue={moment(this.state.beginTime, dateFormat)}
                        value={moment(this.state.beginTime, dateFormat)}
                        onChange={(date, dateString) => this.onChangeStartTime(date, dateString)} /> */}

                    <Form.Item label="至">
                        <DatePicker
                            allowClear={false}
                            defaultValue={moment(this.state.endTime, dateFormat)}
                            locale={locale}
                            showToday
                            value={moment(this.state.endTime, dateFormat)}
                            onChange={(date, dateString) => this.onChangeEndTime(date, dateString)} />
                    </Form.Item>

                    <Form.Item>
                        <div>
                            <Button type="primary" onClick={() => { this.timeSubmit() }}>搜索</Button>
                            &nbsp;
                            <Button onClick={() => { this.reset() }}>重置</Button>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        )
    }

}
